<template>
  <el-dropdown ref="dropdown" trigger="click" @command="dropTask">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :command="item.status" v-for="item in taskFlowItems">
        <div class="item">
          {{item.name}}
        </div>
      </el-dropdown-item>

      <el-dropdown-item v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k===0" :command="c">
        <div class="item">
          <span class="taskfont" style="width:15px;height:15px;margin-right:10px;" :style="{color:c.color,background:c.color}"  v-html="c.color === task.color ? '&#xe61d;' : '&#xe61c;'"></span>{{$L(c.name)}}
        </div>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import {$A} from '../functions/common.js'
export default {
    name: "TaskMenu",
  inject:["root"],
    props: {
        task: {
            type: Object,
            default: () => {
                return {};
            }
        },
        loadStatus: {
            type: Boolean,
            default: false
        },
        colorShow: {
            type: Boolean,
            default: true
        },
        updateBefore: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
        icon: {
            type: String,
            default: 'md-radio-button-off'
        },
        completedIcon: {
            type: String,
            default: 'md-checkmark-circle'
        },
    },
    data() {
        return {
          taskFlows:[],
          taskFlowItems:  [
        {"name": "待处理","status": "start"},
        {"name": "进行中","status": "progress"},
        {"name": "待跟进","status": "followed"},
        {"name": "待测试","status": "test"},
        {"name": "已完成","status": "end"},
        {"name": "已取消","status": "cancel"},

      ],
          // taskFlowItems:  [
          //   {"name": "start|待处理","status": "start"},
          //   {"name": "progress|进行中","status": "progress"},
          //   {"name": "followed|待跟进","status": "followed"},
          //   {"name": "test|待测试","status": "test"},
          //   {"name": "end|已完成","status": "end"},
          //   {"name": "end|已取消","status": "cancel"},
          //
          // ],
          taskColorList: [
            {name: '默认', color: '#ffffff'},
            {name: '黄色', color: '#fffae6'},
            {name: '蓝色', color: '#e5f5ff'},
            {name: '绿色', color: '#ecffe5'},
            {name: '粉色', color: '#ffeaee'},
            {name: '紫色', color: '#f6ecff'},
            {name: '灰色', color: '#f3f3f3'},
          ],
        }
    },
  mounted() {
      },
  computed: {

        loadIng() {
            if (this.loadStatus) {
                return true;
            }
            // if(!this.taskLoading){
            //   return
            // }
            // const load = this.taskLoading.find(({id}) => id == this.task.id);
            // return load && load.num > 0
        },

        flow() {
          if(!this.taskFlows){
            return
          }
            return this.taskFlows.find(({task_id}) => task_id == this.task.id);
        },
    },
    methods: {
      $L(text){
        return text
      },
        show() {
          console.log(this.$refs)
            this.$refs.dropdown.show()
        },

        hide() {
            this.$refs.dropdown.hide()
        },

        handleClick() {
            this.$refs.dropdown.handleClick()
        },

        dropTask(command) {
            let info = {}
            const cacheTask = this.task;
            const completeTemp = (save) => {

            }
            console.log(command)
            // 修改背景色
            if ($A.isJson(command)) {
                if (command.name) {
                    info = {
                      id:this.task.id,
                      color:command.color
                    }
                    this.root.updCaledar(info)
                }
                return;
            }
            // 其他操作
            switch (command) {
                case 'start':
                    info = {
                      id:this.task.id,
                      flow_item_name:'待处理'
                    }
                    this.root.updCaledar(info)
                    break;

              case 'progress':
                info = {
                  id:this.task.id,
                  flow_item_name:'进行中'
                }
                this.root.updCaledar(info)
                break;

              case 'test':
                info = {
                  id:this.task.id,
                  flow_item_name:'待测试'
                }
                this.root.updCaledar(info)
                break;

              case 'followed':
                info = {
                  id:this.task.id,
                  flow_item_name:'待跟进'
                }
                this.root.updCaledar(info)
                break;

              case 'cancel':
                info = {
                  id:this.task.id,
                  flow_item_name:'已取消'
                }
                this.root.updCaledar(info)
                break;

                case 'end':
                  info = {
                    id:this.task.id,
                    flow_item_name:'已完成'
                  }
                  this.root.updCaledar(info)
                    break;

                case 'archived':
                case 'remove':
                    this.archivedOrRemoveTask(command);
                    break;
            }
        },

        visibleChange(visible) {
            // if (visible) {
            //     this.$store.dispatch("getTaskFlow", this.task.id)
            //         .then(this.$refs.dropdownMenu.updatePopper)
            //         .catch(this.$refs.dropdownMenu.updatePopper)
            // }
        },

        updateTask(updata) {
            return new Promise((resolve, reject) => {
                if (this.loadIng) {
                    reject()
                    return;
                }
                //
                Object.keys(updata).forEach(key => this.$set(this.task, key, updata[key]));
                //
                // this.$store.dispatch("taskUpdate", Object.assign(updata, {
                //     task_id: this.task.id,
                // })).then(({data, msg}) => {
                //     $A.messageSuccess(msg);
                //     resolve()
                //     this.$emit("on-update", data)
                // }).catch(({msg}) => {
                //     $A.modalError(msg);
                //     this.$store.dispatch("getTaskOne", this.task.id).catch(() => {})
                //     reject()
                // });
            })
        },

        archivedOrRemoveTask(type) {
            let typeDispatch = 'removeTask';
            let typeName = '删除';
            let typeData = {task_id: this.task.id};
            let typeTask = this.task.parent_id > 0 ? '子任务' : '任务';
            if (type == 'archived') {
                typeDispatch = 'archivedTask'
                typeName = '归档'
                if (this.task.archived_at) {
                    typeName = '还原归档'
                    typeData = {
                        task_id: this.task.id,
                        type: 'recovery'
                    }
                }
            }
            $A.modalConfirm({
                title: typeName + typeTask,
                content: '你确定要' + typeName + typeTask + '【' + this.task.name + '】吗？',
                loading: true,
                onOk: () => {
                    if (this.loadIng) {
                        this.$Modal.remove();
                        return;
                    }
                    this.$store.dispatch(typeDispatch, typeData).then(({msg}) => {
                        $A.messageSuccess(msg);
                        this.$Modal.remove();
                    }).catch(({msg}) => {
                        $A.modalError(msg, 301);
                        this.$Modal.remove();
                    });
                }
            });
        },
    },
}
</script>
